var React = require("react");
var Dialog = require("./dialog");
var Textarea = require("./textarea");

var TextDialog = React.createClass({
	getInitialState: function () {
		return {};
	},
	show: function (value, base64, name) {
		if (value) {
			var self = this;
			self.setState({ value: value, base64: base64, name: name }, function () {
				self.refs.textDialog.show();
			});
		}
	},
	render: function () {
		var state = this.state;
		var value = state.value;
		return (
			<Dialog ref="textDialog" wstyle="w-text-dialog">
				<div className="modal-body">
					<button type="button" className="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
					</button>
					<div
						className="orient-vertical-box"
						style={{ width: 860, height: 560, marginTop: 22 }}>
						<Textarea
							className="fill"
							value={value}
							base64={state.base64}
							defaultName={state.name}
						/>
					</div>
				</div>
				<div className="modal-footer">
					<button
						type="button"
						className="btn btn-primary w-copy-text-with-tips"
						data-clipboard-text={value}>
						Copy
					</button>
					<button type="button" className="btn btn-default" data-dismiss="modal">
						Close
					</button>
				</div>
			</Dialog>
		);
	}
});

var TextDialogWrap = React.createClass({
	shouldComponentUpdate: function () {
		return false;
	},
	show: function (value, base64, name) {
		this.refs.textDialog.show(value, base64, name);
	},
	render: function () {
		return <TextDialog ref="textDialog" />;
	}
});

module.exports = TextDialogWrap;
